<template>
  <el-drawer with-header :visible.sync="open_student_edit" direction="rtl" size="50%" :show-close="false">
    <div  >
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">编辑学员</div>

            <div class="grid-content bg-purple      text-size-20 mt20 text-gray   text-gray">请编辑学员信息</div>

          </div>

        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt20">


            <el-button @click="cancel" style="width: 100px;margin-right: 100px;">取消</el-button>

          </div>

        </el-col>
      </el-row>

      <el-form class=" ml30 mr30" ref="form" :model="form" :rules="rules_student" label-width="80px"
        label-position="left">
        <el-divider style="width: 100%;"></el-divider>


        <el-form-item label="学员姓名" prop="userName">
          <el-input style="width: 450px;" v-model="form.userName" placeholder="请输入学员姓名" autofocus />
        </el-form-item>
        <el-form-item label="联系人" prop="relationship">
          <el-select style="width: 450px;" v-model="form.relationship" placeholder="请选择关系">
            <el-option v-for="dict in dict.type.student_relationship" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phonenumber">
          <el-input style="width: 450px;" v-model="form.phonenumber" placeholder="请输入联系电话" />
        </el-form-item>

        <el-divider style="width: 80%;">以下信息非必填</el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学号" prop="studentId">
              <el-input style="width: 350px;" v-model="form.studentId" placeholder="请输入学号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟进人" prop="followUpPerson">

              <!-- <el-input style="width: 350px;" v-model="form.followUpPerson" placeholder="请输入跟进人"   filterable/> -->
              <el-select style="width: 350px;" v-model="form.followUpPerson" placeholder="请选择跟进人" filterable>
                <el-option v-for="dict in userList" :key="dict.userId" :label="dict.nickName" :value="dict.nickName">
                </el-option>

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学生生日" prop="birthday">
              <el-date-picker style="width: 350px;" clearable v-model="form.birthday" type="date"
                value-format="yyyy-MM-dd" placeholder="请选择学生生日">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生性别" prop="sex">
              <el-select style="width: 350px;" v-model="form.sex" placeholder="请选择学生性别">
                <el-option v-for="dict in dict.type.student_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="就读学校" prop="school">
              <el-input style="width: 350px;" v-model="form.school" placeholder="请输入就读学校" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级" prop="grade">
              <el-select style="width: 350px;" v-model="form.grade" placeholder="请选择年级">
                <el-option v-for="dict in dict.type.student_grade" :key="dict.value" :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="住址" prop="address">
              <el-input style="width: 350px;" v-model="form.address" placeholder="请输入住址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招生渠道" prop="enrollmentChannels">
              <el-select style="width: 350px;" v-model="form.enrollmentChannels" placeholder="请选择招生渠道">
                <el-option v-for="dict in dict.type.enrollment_channels" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input style="width: 93%;" v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-divider></el-divider>
        <div>
          <el-button type="primary" @click="submitform" style="width: 100%;">立即修改</el-button>

        </div>
      </el-form>
    </div>

  </el-drawer>
</template>

<script>
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  export default {
    name: 'AddStudentDrawer',
    dicts: ['sys_oper_type', 'student_relationship', 'student_state', 'student_sex', 'enrollment_channels',
      'student_grade'
    ],
    data() {
      return {
        // 查询参数
        queryParams_student: {
          pageNum: 1,
          pageSize: 10,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},


        rules_student: {
          userName: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 5,
              message: '长度在 1 到 5 个字符',
              trigger: 'blur'
            }
          ],
          relationship: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }],


          phonenumber: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'change'
            },
            {
              min: 11,
              max: 12,
              message: '长度在 11 到 12 个字符',
              trigger: 'blur'
            }
          ],

        },

        type: false,
        open_student_edit: false,

        showtype: true,
        options: [],
        userList: [],
        queryParamsTeacher: {}
      }
    },
    props: {





    },
    computed: {

    },
    watch: {

    },
    created() {
      this.getTeacherList();
      // console.log("走了");


    },

    methods: {
      openbyid(id) {
        this.open_student_edit = true;
        if(this.data!="0"){
          this.getStudentbyid(id);
        }
      },

      danyi() {

        this.showtype = true;
      },
      piliang() {

        this.showtype = false;
      },
      // 取消按钮
      cancel() {
        this.open_student_edit = false;
        this.reset();
      },



      /** 提交按钮 */
      submitform() {
        this.$refs["form"].validate(valid => {
          if (valid) {
               this.form.deptId = this.$store.state.user.deptId;
            if (this.form.id != null) {

              updateStudent(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open_student_edit = false;

                this.reset();
              });
            } else {

              addStudent(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open_student_edit = false;
                 this.$emit('addsuccess', 'addsuccess'); // 触发名为'childEvent'的自定义事件，并传递数据
                this.reset();

              });
            }
          } else {
            console.log('error submit!!');
            this.$message({
              message: '请输入姓名、联系人、电话！',
              type: 'warning'
            });


            return false;
          }
        });
      },
      /** 提交按钮 */
      submitform2() {
        this.$refs["form2"].validate(valid => {
          if (valid) {
               this.form.deptId = this.$store.state.user.deptId;
            if (this.form2.id != null) {
              this.form.deptId = this.$store.state.user.deptId;
              updateStudent(this.form2).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open_student_edit = false;

                this.reset2();
                 this.$emit('EditStudentDrawer', 'succsee'); // 触发名为'childEvent'的自定义事件，并传递数据
              });
            } else {
              this.form.deptId = this.$store.state.user.deptId;
              addStudent(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open_student_edit = false;
                this.reset2();

              });
            }
          } else {
            console.log('error submit!!');
            this.$message({
              message: '请输入姓名、联系人、电话！',
              type: 'warning'
            });


            return false;
          }
        });
      },
 
      getTeacherList() {

        this.queryParamsTeacher.deptId = this.$store.state.user.deptId;
         
        listUser2(this.queryParamsTeacher).then(response => {
          this.userList = response.rows;
          
        });
      },

      // 表单重置
      reset() {
        this.form = {
          id: null,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          delFlag: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },
      reset2() {
        this.form2 = {
          id: null,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          delFlag: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form2");
      },
      /** 搜索按钮操作 */
      // handleQuery() {
      //   this.queryParams.pageNum = 1;
      //   this.getList();
      // },
      /** 重置按钮操作 */
      // resetQuery() {
      //   this.resetForm("queryForm");
      //   this.handleQuery();
      // },
      // 多选框选中数据
      // handleSelectionChange(selection) {
      //   this.ids = selection.map(item => item.id)
      //   this.single = selection.length !== 1
      //   this.multiple = !selection.length
      // },
      /** 新增按钮操作 */
      // handleAdd() {
      //   this.reset();
      //   this.open = true;
      //   // this.title = "添加学生信息";
      //   this.form.deptId = this.$store.state.user.deptId;

      // },
      /** 修改按钮操作 */
      getStudentbyid(id) {
        this.reset();

        getStudent(id).then(response => {
          this.form = response.data;

          this.open = true;
          // this.title = "修改学生信息";
        });
      },
      /** 提交按钮 */
      // submitForm() {
      //   this.$refs["form"].validate(valid => {
      //     if (valid) {
      //       if (this.form.id != null) {
      //         updateStudent(this.form).then(response => {
      //           this.$modal.msgSuccess("修改成功");
      //           this.open = false;
      //           this.getList();
      //         });
      //       } else {
      //         addStudent(this.form).then(response => {
      //           this.$modal.msgSuccess("新增成功");
      //           this.open = false;
      //           this.getList();
      //         });
      //       }
      //     }
      //   });
      // },
      /** 删除按钮操作 */
      // handleDelete(row) {
      //   const ids = row.id || this.ids;
      //   this.$modal.confirm('是否确认删除学生信息编号为"' + ids + '"的数据项？').then(function() {
      //     return delStudent(ids);
      //   }).then(() => {
      //     this.getList();
      //     this.$modal.msgSuccess("删除成功");
      //   }).catch(() => {});
      // },
      /** 导出按钮操作 */
      // handleExport() {
      //   this.download('student/student/export', {
      //     ...this.queryParams
      //   }, `student_${new Date().getTime()}.xlsx`)
      // }
    }





  }
</script>

<style lang="scss" scoped>
  .rightPanel-background {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
    background: rgba(0, 0, 0, .2);
    z-index: -1;
  }

  .rightPanel {
    width: 100%;
    max-width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
    transition: all .25s cubic-bezier(.7, .3, .1, 1);
    transform: translate(100%);
    background: #fff;
    z-index: 40000;
  }

  .handle-button {
    width: 48px;
    height: 48px;
    position: absolute;
    left: -48px;
    text-align: center;
    font-size: 24px;
    border-radius: 6px 0 0 6px !important;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
    color: #fff;
    line-height: 48px;

    i {
      font-size: 24px;
      line-height: 48px;
    }
  }
</style>
